<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="规则编号">
              <a-input v-model="queryParam.id" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="使用状态">
              <a-select v-model="queryParam.requestStatus" placeholder="请选择" default-value="0">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">关闭</a-select-option>
                <a-select-option value="2">运行中</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="advanced">
            <a-col :md="8" :sm="24">
              <a-form-item label="调用次数">
                <a-input-number v-model="queryParam.callNo" style="width: 100%"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="更新日期">
                <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="使用状态">
                <a-select v-model="queryParam.requestStatus" placeholder="请选择" default-value="0">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="使用状态">
                <a-select placeholder="请选择" default-value="0">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span
              class="table-page-search-submitButtons"
              :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <!--<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>-->
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              <a @click="toggleAdvanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="$refs.createModal.add()">新建</a-button>
      <a-button type="dashed" @click="tableOption">{{ optionAlertShow && '关闭' || '开启' }} alert</a-button>
      <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1">
            <a-icon type="delete"/>
            删除
          </a-menu-item>
          <!-- lock | unlock -->
          <a-menu-item key="2">
            <a-icon type="lock"/>
            锁定
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>

    <s-table
      ref="table"
      size="default"
      rowKey="key"
      :columns="columns"
      :data="loadData"
      @change="handleTableChange"
      :alert="options.alert"
      :rowSelection="options.rowSelection"
      :pagination="pagination"
    >
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <span slot="status" slot-scope="text">
        <a-badge :status="text | statusTypeFilter" :text="text | statusFilter"/>
      </span>
      <span slot="activityId" slot-scope="text">
        <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
      </span>

      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleEdit(record)">配置</a>
          <a-divider type="vertical"/>
          <a @click="handleSub(record)">订阅报警</a>
        </template>
      </span>
    </s-table>
    <create-form ref="createModal" @ok="handleOk"/>
    <step-by-step-modal ref="modal" @ok="handleOk"/>
  </a-card>
</template>

<script>
    import moment from 'moment'
    import { STable, Ellipsis } from '@/components'
    import StepByStepModal from './modules/StepByStepModal'
    import CreateForm from './modules/CreateForm'
    import { getRoleList, getServiceList } from '@/api/manage'

    const statusMap = {
        0: {
            status: 'default',
            text: '关闭'
        },
        1: {
            status: 'processing',
            text: '运行中'
        },
        2: {
            status: 'success',
            text: '已上线'
        },
        3: {
            status: 'error',
            text: '异常'
        }
    }

    export default {
        name: 'TableList',
        components: {
            STable,
            Ellipsis,
            CreateForm,
            StepByStepModal
        },
        data () {
            return {
                pagination: {
                    total: 0,
                    pageSize: 20,
                    showSizeChanger: true,
                    showTotal: total => `共有 ${total} 条数据`
                },

                mdl: {},
                // 高级搜索 展开/关闭
                advanced: false,
                // 查询参数
                queryParam: {
                    pageSize: 10,
                    pageNo: 1
                },
                total: 0,
                // 表头
                columns: [
                    {
                        title: '#',
                        scopedSlots: { customRender: 'serial' }
                    },
                    {
                        title: 'id',
                        dataIndex: 'id'
                    },
                    {
                        title: '采购申请单号',
                        dataIndex: 'purchaseRequestNo'
                    },
                    {
                        title: '仓库',
                        dataIndex: 'warehouseName'
                    },
                    {
                        title: '创建人',
                        dataIndex: 'creator'
                    },
                    {
                        title: '送货时间',
                        dataIndex: 'deliveryTime'
                    },
                    {
                        title: '申请类型',
                        dataIndex: 'requestTypeDesc'
                    },
                    {
                        title: '申请单状态',
                        dataIndex: 'requestStatusDesc'
                    },
                    {
                        title: '采购总金额（含税）',
                        dataIndex: 'purchaseTaxPriceSum'
                    },
                    {
                        title: '采购总金额（不含税）',
                        dataIndex: 'purchasePriceSum'
                    },
                    {
                        title: '操作',
                        dataIndex: 'action',
                        width: '150px',
                        scopedSlots: { customRender: 'action' }
                    }
                ],
                // 加载数据方法 必须为 Promise 对象
                loadData: parameter => {
                    Object.assign(parameter, this.queryParam)
                    return getServiceList(parameter)
                        .then(res => {
                            return res.body
                        })
                },
                selectedRowKeys: [],
                selectedRows: [],

                // custom table alert & rowSelection
                options: {
                    alert: {
                        show: true,
                        clear: () => {
                            this.selectedRowKeys = []
                        }
                    },
                    rowSelection: {
                        selectedRowKeys: this.selectedRowKeys,
                        onChange: this.onSelectChange
                    }
                },
                optionAlertShow: false
            }
        },
        filters: {
            statusFilter (type) {
                return statusMap[type].text
            },
            statusTypeFilter (type) {
                return statusMap[type].status
            }
        },
        created () {
            this.tableOption()
            getRoleList({ t: new Date() })
        },
        methods: {
            tableOption () {
                if (!this.optionAlertShow) {
                    this.options = {
                        alert: {
                            show: true,
                            clear: () => {
                                this.selectedRowKeys = []
                            }
                        },
                        rowSelection: {
                            selectedRowKeys: this.selectedRowKeys,
                            onChange: this.onSelectChange,
                            getCheckboxProps: record => ({
                                props: {
                                    disabled: record.no === 'No 2', // Column configuration not to be checked
                                    name: record.no
                                }
                            })
                        }
                    }
                    this.optionAlertShow = true
                } else {
                    this.options = {
                        alert: false,
                        rowSelection: null
                    }
                    this.optionAlertShow = false
                }
            },

            handleEdit (record) {
                console.log(record)
                this.$refs.modal.edit(record)
            },
            handleSub (record) {
                if (record.status !== 0) {
                    this.$message.info(`${record.no} 订阅成功`)
                } else {
                    this.$message.error(`${record.no} 订阅失败，规则已关闭`)
                }
            },
            handleOk () {
                this.$refs.table.refresh()
            },
            onSelectChange (selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys
                this.selectedRows = selectedRows
            },
            toggleAdvanced () {
                this.advanced = !this.advanced
            },
            resetSearchForm () {
                this.queryParam = {
                    date: moment(new Date())
                }
            },
            handleTableChange (pagination) {
                const vm = this
                this.pagination.current = pagination.current
                this.pagination.pageSize = pagination.pageSize
                this.queryParam.pageNo = pagination.current
                this.queryParam.pageSize = pagination.pageSize
                debugger
                return getServiceList(this.queryParam)
                    .then(res => {
                        vm.loading = false
                        return res.body
                    })
            }
        }
    }
</script>
